<template>
    <div class="com-calendar">
        <div class="dp-container">
            <div class="dp-header">
                <div class="dp-item dp-left" @click="hiddenCalendar">取消</div>
                <div class="title">选择维修日期</div>
                <div class="dp-item dp-right" @click="choiceDate">确定</div>
            </div>
            <div class="title-nav">
                <span>年</span>
                <span>月</span>
                <span>日</span>
                <span>时</span>
                <span>分</span>
            </div>
            <div class="dp-content">
                <div class="dp-content">
                    <div class="dp-item">
                        <com-date-scroll :select="status" :startTime="startTime" :dType="'year'" :endTime="endTime"></com-date-scroll>
                    </div>
                    <div class="dp-item">
                        <com-date-scroll :select="status" :dType="'month'"></com-date-scroll>
                    </div>
                    <div class="dp-item">
                        <com-date-scroll :select="status" :dType="'day'"></com-date-scroll>
                    </div>
                    <div class="dp-item">
                        <com-date-scroll :select="status" :dType="'hour'"></com-date-scroll>
                    </div>
                    <div class="dp-item">
                        <com-date-scroll :select="status" :dType="'minute'"></com-date-scroll>
                    </div>
                </div>
            </div>
            <div class="dp-bottom">
                <span :class="[item.selected ? 'select' : 'unselect']" v-for="(item,index) in degree" @click="selectDegree(item,index)" :key="item.id">{{item.name}}</span>
            </div>
        </div>
    </div>
</template>
<script>
import dateScroll from './dateScroll';
export default {
    data: function () {
        return {
            year: '',
            month: '',
            day: '',
            degree: [{
                name: '紧急',
                type: 1,
                selected: false
            }, {
                name: '一般',
                type: 0,
                selected: true
            }]
        }
    },
    props: {
        startTime: {
            type: Number,
            default: 1900
        },
        endTime: {
            type: Number,
            default: 2050
        }
    },
    components: {
        comDateScroll: dateScroll
    },
    computed: {
        status: function () {
            return this.$store.getters.getCalendarOk;
        }
    },
    methods: {
        choiceDate: function () {
            this.$store.dispatch('calendarOk', true)
        },
        hiddenCalendar: function () {
            this.$store.dispatch('calendarStatus', false);
        },
        selectDegree(item, index) {
            this.degree.forEach((item, num) => {
                index == num ? (item.selected = true, this.$store.dispatch('degree_type', item.type)) : item.selected = false
            })
        }
    }
}
</script>
<style lang="less">
.com-calendar {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 100vw;
    height: 100vh;
    display: none;
    transition: all .5s;
    .scroller-component {
        display: block;
        position: relative;
        height: 238px;
        overflow: hidden;
        width: 100%;
    }
    .scroller-content {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        z-index: -1;
    }
    .scroller-mask {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        margin: 0 auto;
        width: 100%;
        z-index: 3;
        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)),
        linear-gradient(to top, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6));
        background-position: top, bottom;
        background-size: 100% 102px;
        background-repeat: no-repeat;
    }
    .scroller-item {
        text-align: center;
        font-size: 16px;
        height: 34px;
        line-height: 34px;
        color: #000;
    }
    .scroller-indicator {
        width: 100%;
        height: 34px;
        position: absolute;
        left: 0;
        top: 102px;
        z-index: 3;
        background-image: linear-gradient(to bottom, #d0d0d0, #d0d0d0, transparent, transparent),
        linear-gradient(to top, #d0d0d0, #d0d0d0, transparent, transparent);
        background-position: top, bottom;
        background-size: 100% 1px;
        background-repeat: no-repeat;
    }
    .dp-container {
        position: fixed;
        width: 100%;
        left: 0;
        bottom: 0;
        z-index: 10000;
        background-color: #fff;
        transition: transform 0.3s ease;
        transform: translateY(0);
    }
    .dp-container .title-nav {
        display: -webkit-flex;
        align-items: center;
        text-align: center;
        font-size: 0.24rem;
        color: #999;
        margin-top: 5px;
    }
    .dp-container .title-nav span {
        flex: 1;
        line-height: 0.5rem;
    }
    .dp-mask {
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0px;
        top: 0px;
        opacity: 0;
        transition: opacity 0.1s ease;
        background-color: #000;
        z-index: 9999;
    }
    .dp-header {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        background-image: linear-gradient(to bottom, #e7e7e7, #e7e7e7, transparent, transparent);
        background-position: bottom;
        background-size: 100% 1px;
        background-repeat: no-repeat;
    }
    .dp-header .dp-item {
        color: #666;
        font-size: 0.28rem;
        height: 0.9rem;
        line-height: 0.9rem;
        cursor: pointer;
    }
    .dp-content {
        display: flex;
        width: 100%;
        align-items: center;
        padding: 5px 0;
    }
    .dp-header .dp-item,
    .dp-content .dp-item {
        box-sizing: border-box;
        flex: 1;
        text-align: center;
    }
    .dp-header .title {
        flex: 3;
        text-align: center;
        font-size: 0.28rem;
        font-weight: 700;
        color: #222;
    }
    .dp-header .dp-left {
        color: #999;
    }
    .dp-header .dp-right {
        color: #5b91fe;
    }
    .dp-bottom {
        display: -webkit-flex;
        align-items: center;
        justify-content: space-around;
        height: 0.9rem;
        color: #999;
        border-top: 1px solid #e0e0e0;
        span {
            padding-left: 0.43rem;
            line-height: 0.9rem;
        }
        span.select {
            background: url('./select.png') no-repeat left center;
            background-size: 0.3rem 0.3rem;
            color: #5b91fe;
        }
        span.unselect {
            background: url('./unselect.png') no-repeat left center;
            background-size: 0.3rem 0.3rem;
        }
    }
}
</style>